<template>
  <div class="base-page">
    <!-- 导航栏-->
    <PageHead>医生详情</PageHead>
    <MyRow2>
      <img :src="'/api/common/download?name='+doctorDetail.doctorPhoto" alt="头像" class="my-avatar"/>
      <ul>
        <li><span class="doctor-name">{{ doctorDetail.doctorName }}</span></li>
        <li class="doctor-username">{{ doctorDetail.username }}</li>
      </ul>
      <ul class="hide-narrow">
        <li><i class="el-icon-user"></i> {{ getAge(doctorDetail.doctorAge) }}岁 &nbsp;|&nbsp; {{ doctorDetail.doctorGender ? "男" : "女" }}</li>
        <li><i class="el-icon-suitcase"></i> {{ getJob(doctorDetail.authLv) }} &nbsp;|&nbsp; {{ doctorDetail.departmentName }}</li>
        <li><i class="el-icon-phone"></i> {{ doctorDetail.doctorTel }}</li>
        <li><i class="el-icon-document"></i> {{ doctorDetail.doctorInfo }}</li>
        <li>
          <router-link :to="'/reception/chat/'+doctorDetail.doctorId">
            <el-button type="primary" class="consult-btn">咨询医生</el-button>
          </router-link>
        </li>
      </ul>
      <template #right>
        <table class="appoint">
          <thead>
          <tr>
            <th>挂号人</th>
            <th>宠物</th>
            <th>描述</th>
            <th>时间</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="a in appointDetail" :key="a.appointmentId">
            <td>{{ a.clientName }}</td>
            <td>{{ a.petName }}</td>
            <td>{{ a.appointmentInfo }}</td>
            <td>{{ moveT(a.appointmentDate) }}</td>
          </tr>
          </tbody>
        </table>

        <!-- 用户评价模块 -->
        <div class="comments-section">
          <h3 class="comments-title">用户评价</h3>
          <ul class="comments-list">
            <li v-for="comment in comments" :key="comment.commentId" class="comment-item">
              <div class="comment-header">
                <span class="comment-user">{{ comment.clientUsername }}</span>
                <span class="comment-time">{{ moveT(comment.createTime) }}</span>
              </div>
              <div class="comment-content">{{ comment.commentsMsg }}</div>
            </li>
          </ul>
          <div class="add-comment">
            <el-input
                type="textarea"
                :rows="4"
                placeholder="请输入您的评价"
                v-model="newComment.commentsMsg"
                class="comment-input"
            />
            <el-button
                type="primary"
                @click="submitComment"
                class="submit-btn"
            >提交评价</el-button>
          </div>
        </div>
      </template>
    </MyRow2>
  </div>
</template>

<style lang="scss" scoped>
/* 粉色基调变量 */
$primary-pink: #f48fb1;
$light-pink: #ffebee;
$dark-pink: #d81b60;
$pink-shadow: rgba(244, 143, 177, 0.3);

/* 响应式设计 */
@media (min-width: 768px) {
  .base-page {
    width: 70vw;
    left: 15vw;

    img.my-avatar {
      border-radius: 50%;
      margin-top: 10px;
      width: 128px;
      height: 128px;
      border: 3px solid $primary-pink;
      box-shadow: 0 4px 12px $pink-shadow;
    }
  }
}

@media (max-width: 768px) {
  .base-page {
    width: 90vw;
    left: 5vw;

    img.my-avatar {
      border-radius: 50%;
      width: 64px;
      height: 64px;
      border: 2px solid $primary-pink;
    }

    .hide-narrow {
      display: none;
    }
  }
}

/* 主容器样式 */
.base-page {
  position: absolute;
  top: 12vh;
  background-color: $light-pink;
  box-shadow: 0 8px 24px $pink-shadow;
  padding: 20px;
  border-radius: 16px;
  border: 1px solid lighten($primary-pink, 20%);

  /* 医生信息卡片 */
  ul {
    list-style: none;
    margin-left: -24px;
    padding: 0;

    li {
      margin-bottom: 8px;
      color: #555;
      font-size: 14px;

      i {
        color: $dark-pink;
        margin-right: 6px;
      }
    }
  }

  .doctor-name {
    font-size: 24px;
    font-weight: bold;
    color: $dark-pink;
    letter-spacing: 1px;
  }

  .doctor-username {
    color: #888;
    font-size: 14px;
  }
}

/* 咨询按钮 */
.consult-btn {
  background-color: $dark-pink;
  border-color: $dark-pink;
  margin-top: 10px;
  padding: 10px 20px;
  border-radius: 20px;
  font-weight: bold;

  &:hover {
    background-color: darken($dark-pink, 10%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px $pink-shadow;
  }
}

/* 挂号表格 */
table.appoint {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;

  thead {
    background-color: $primary-pink;
    color: white;

    th {
      padding: 12px 8px;
      font-weight: 500;
    }
  }

  tbody {
    tr {
      background-color: white;

      &:nth-child(even) {
        background-color: lighten($light-pink, 5%);
      }

      &:hover {
        background-color: lighten($primary-pink, 30%);
      }

      td {
        padding: 10px 8px;
        border-bottom: 1px solid lighten($primary-pink, 20%);
      }
    }
  }
}

/* 用户评价样式 */
.comments-section {
  margin-top: 30px;
  background-color: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(244, 143, 177, 0.15);
  border: 1px solid lighten($primary-pink, 25%);
}

.comments-title {
  color: $dark-pink;
  font-size: 20px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid $light-pink;
}

.comments-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comment-item {
  padding: 16px;
  margin-bottom: 16px;
  background-color: lighten($light-pink, 8%);
  border-radius: 8px;
  border-left: 4px solid $primary-pink;
  transition: all 0.3s ease;

  &:hover {
    transform: translateX(5px);
    box-shadow: 0 2px 8px $pink-shadow;
  }
}

.comment-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.comment-user {
  font-weight: bold;
  color: $dark-pink;
  font-size: 15px;
}

.comment-time {
  color: #888;
  font-size: 13px;
}

.comment-content {
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

.add-comment {
  margin-top: 25px;
}

.comment-input {
  ::v-deep .el-textarea__inner {
    border-color: $primary-pink;
    border-radius: 8px;
    &:focus {
      border-color: $dark-pink;
      box-shadow: 0 0 0 2px $pink-shadow;
    }
  }
}

.submit-btn {
  background-color: $dark-pink;
  border-color: $dark-pink;
  padding: 10px 24px;
  border-radius: 20px;
  margin-top: 12px;
  transition: all 0.3s;

  &:hover {
    background-color: darken($dark-pink, 8%);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px $pink-shadow;
  }
}
</style>

<script lang="ts" setup>
import PageHead from "@/components/row/PageHead.vue";
import {getAge, moveT} from "@/utils/TimeUtil";
import {getJob} from "@/utils/JobUtil";
import {DoctorDto} from "@/model/DO/DoctorDto";
import {AppointDto} from "@/model/DO/AppointDto";
// import {CommentDto} from "@/model/DO/CommentDto";
import {onMounted, ref} from "vue";
import {reqDoctorOne} from "@/request/DoctorApi";
import {reqDoctorOneA} from "@/request/AppointApi";
import {reqAddComment,reqGetComments} from "@/request/ClientApi";
import MyRow2 from "@/components/row/MyRow2.vue";
import {ElMessage, ElMessageBox} from "element-plus";

// 如此获取传参
const props = defineProps<{
  doctorId: string
}>()

const doctorDetail = ref<DoctorDto>({
  "doctorId": 0,
  "username": "",
  "doctorName": "",
  "doctorGender": true,
  "doctorAge": "",
  "doctorPhoto": "",
  "doctorTel": "",
  "authLv": 0,
  "doctorInfo": "",
  "departmentName": ""
})

const appointDetail = ref<AppointDto[]>([]);
const comments = ref<[]>([]);
const newComment = ref({
  "doctorId": parseInt(props.doctorId),
  "commentsMsg": "",
})
const getComments = () => {
  // 获取评价
  reqGetComments(parseInt(props.doctorId)).then((res: any )=> {
    comments.value = res
  }).catch(error => {
    console.error("获取评论时出错", error);
    ElMessageBox.alert("获取评论时出错，请重试");
  })
}
onMounted(() => {
  reqDoctorOne(parseInt(props.doctorId)).then(res => {
    doctorDetail.value = res
  })
  reqDoctorOneA(parseInt(props.doctorId)).then(res => {
    appointDetail.value = res
  })
  getComments()
})

// 提交评价
const submitComment = () => {
  if (newComment.value.commentsMsg.trim() === "") {
    ElMessageBox.alert("评论内容不能为空");
    return;
  }
  reqAddComment(newComment.value).then(res => {
    if (res) {
      ElMessage.success("提交评论成功");
      getComments()
      newComment.value.commentsMsg = ""; // 清空输入框
    } else {
      ElMessageBox.alert("提交评论失败，请重试");
    }
  }).catch(error => {
    console.error("提交评论时出错", error);
    ElMessageBox.alert("提交评论时出错，请重试");
  });
}
</script>
